<template>
	<view class="profit">
		<!-- #ifdef APP-PLUS -->
		<Hearder :name="'我的收益'"></Hearder>
		<!-- #endif -->
		<u-transition :show="show">
			<view class="baseinfo">
				<view class="show-price">
					<view>
						<view>推广收益</view>
						<view>{{userinfo.distribution_amount_ktx}}</view>
					</view>
					<!-- <view @click="toPage('Withdrawal?type=1')">提现</view> -->
				</view>
			</view>
			<view class="getmoney">
				<view @click="toPage('invest?ptbname='+ptbname)" v-if="userinfo.open_recharge_amount==1">
					<u-transition :show="show">
						<image src="/static/images/cz.png"></image>
					</u-transition>
					<view>
						<view>
							{{ptbname}}充值
							<u-icon name="arrow-right" color="#323232" size="14"></u-icon>
						</view>
						<view>余额：{{userinfo.account}}</view>
					</view>
				</view>
				<view @click="toPage('lingpai')">
					<u-transition :show="show">
						<image src="/static/images/gm.png"></image>
					</u-transition>
					<view>
						<view>
							门票购买
							<u-icon name="arrow-right" color="#323232" size="14"></u-icon>
						</view>
						<view>剩余：{{userinfo.member_token}}个</view>
					</view>
				</view>
			</view>
			<view class="income-con">
				<view class="income-title">收益明细</view>
				<view class="" v-if="loading">
					<u-skeleton rows="4" :title="false" :loading="loading"
						:rowsHeight="['100rpx', '100rpx', '100rpx', '100rpx']" :rowsWidth="['100%', '100%', '100%', '100%']"
						animate></u-skeleton>
				</view>
				<view class="list-con" v-if="!loading">
					<view class="every" v-for="item in list" :key="item.id">
						<view>
							<view>{{item.remark}}</view>
							<view>{{item.create_time}}</view>
						</view>
						<view v-if="item.amount>0">+{{item.amount}}</view>
						<view style="color: #999;" v-if="item.amount<=0">{{item.amount}}</view>
					</view>
				</view>
				<view class="nidata" v-if="list.length==0 && !loading">
					<image src="../../static/images/noimg.png" style="margin-top: 200rpx;"></image>
				</view>
			</view>
		</u-transition>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				page: 1,
				list: [],
				userinfo: {},
				last_page: 1,
				ptbname: '',
				show: true,
				loading: true,
			}
		},
		onLoad(options) {
			if (options.ptbname) {
				this.ptbname = options.ptbname
			}
		},
		onShow() {
			this.list = []
			this.page = 1
			this.getMemberDetails()
			this.profitDetail()
		},
		onReachBottom() {
			this.page = this.page + 1
			if (this.page <= this.last_page) {
				this.profitDetail()
			}
		},
		methods: {
			// 获取个人信息
			getMemberDetails() {
				this.request('/member/getMemberDetails').then(res => {
					if (res.data.code == 1) {
						this.userinfo = res.data.data
					}
					this.loading = false;
				})
			},
			// 获取收益记录
			profitDetail() {
				this.request('/member/profitDetail', {
					page: this.page,
					limit: 10
				}).then(res => {
					if (res.data.code == 1) {
						this.list = this.list.concat(res.data.data.data)
						this.last_page = res.data.data.last_page
					}
					this.loading = false;
				})
			},
			toPage(route) {
				uni.navigateTo({
					url: route
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	.nidata image {
		margin-top: 180rpx;
	}

	.profit {
		.baseinfo {
			width: 100%;
			height: 183rpx;
			border-bottom: 20rpx solid $uni-background-color;
			background: url('../../static/images/tg.png');
			background-size: 100% 100%;

			.show-price {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 36rpx 30rpx 0 50rpx;

				>view {

					// &:last-of-type{
					// 	width: 128rpx;
					// 	height: 58rpx;
					// 	border: 1rpx solid $uni-item-color;
					// 	border-radius: 58rpx;
					// 	font-size: 28rpx;
					// 	color: $uni-item-color;
					// 	text-align: center;
					// 	line-height: 58rpx;
					// }
					view {
						color: #fff;

						&:first-of-type {
							font-size: 24rpx;
						}

						&:last-of-type {
							font-size: 40rpx;
							font-weight: 800;
							margin-top: 20rpx;
						}
					}
				}
			}
		}

		.getmoney {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 150rpx;
			border-bottom: 20rpx solid $uni-background-color;

			>view {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 50%;
				height: 60rpx;

				&:nth-of-type(2) {
					border-left: 1rpx solid #eee;
				}

				image {
					width: 64rpx;
					height: 64rpx;
					margin-top: 10rpx;
				}

				>view {
					margin-left: 20rpx;

					view {
						&:first-of-type {
							font-weight: 800;
							font-size: 28rpx;

							.u-icon {
								margin-left: 10rpx;
								top: 1rpx;
							}
						}

						&:last-of-type {
							font-size: 20rpx;
							color: #8B8E96;
							margin-top: 6rpx;
						}
					}
				}
			}
		}

		.income-con {
			margin: 25rpx 4%;

			.income-title {
				font-weight: 800;
				height: 32rpx;
				border-left: 4rpx solid $uni-item-color;
				line-height: 32rpx;
				padding-left: 20rpx;
			}

			.list-con {
				.every {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 30rpx 0;
					border-bottom: 1rpx solid $uni-background-color;

					>view {
						&:first-of-type {
							width: 80%;
						}

						&:last-of-type {
							color: $uni-text-color;
							font-weight: 800;
						}

						view {
							font-size: 24rpx;

							&:last-of-type {
								margin-top: 12rpx;
							}
						}
					}
				}
			}
		}
	}
</style>